/** * 登录之后的个人信息页面 */
<template>
	<view v-if="JSON.stringify(userInfo) !== '{}'">
		<view>
			<u-navbar title="个人信息" :autoBack="true" :bgColor="bgColor">
				<!-- <view slot="right" @click="gotoUpdate">修改&gt;</view> -->
			</u-navbar>
		</view>

		<view class="u-page__item">
			<u-cell-group>
				<u-cell @click="lookImg" title="头像" :isLink="true" size="large">
					<u-avatar slot="value" :src="detailInfo.avatar"></u-avatar>
				</u-cell>
				<!-- <u-cell v-for="item in titles" :title="item.title" :value="item.value" :isLink="true"
					size="large"></u-cell>	 -->
				<u-cell title="昵称" :isLink="true" size="large" :value="detailInfo.nickName"></u-cell>
				<u-cell title="手机号" :isLink="true" size="large" :value="detailInfo.phone"></u-cell>
				<u-cell title="学校" :isLink="true" size="large" :value="detailInfo.school"></u-cell>
				<u-cell title="生日" :isLink="true" :value="detailInfo.birthday | date" size="large"></u-cell>
				<u-cell title="性别" :isLink="true" :value="detailInfo.gender" size="large"></u-cell>
				<u-cell title="专业" :isLink="true" :value="detailInfo.speciality" size="large"></u-cell>
				<u-cell title="学历" :isLink="true" :value="detailInfo.education" size="large"></u-cell>
				<u-cell title="意向职位" :isLink="true" :value="detailInfo.position" size="large"></u-cell>
				<u-cell title="意向地点" :isLink="true" :value="detailInfo.address" size="large"></u-cell>
				<!-- <u-cell title="个人介绍" :isLink="true" :value="userInfo.personDesc?userInfo.personDesc:'填写'" size="large"></u-cell> -->
				<!-- 点击查看个人介绍的内容 -->
				<view class="myIntroduce">
					<view class="Intitle">个人介绍：</view>
					<!-- <view class="content"><rich-text :nodes="detailInfo.personDesc ? detailInfo.personDesc : '<p>暂无</p>'"></rich-text></view> -->
					<view class="content">{{detailInfo.personDesc ? detailInfo.personDesc : '暂无'}}</view>
				</view>
			</u-cell-group>
			<!-- <u-datetime-picker :show="show" v-model="value" mode="date" @cancel="cancel" @confirm="confirm"></u-datetime-picker>
			<u-picker :show="show1" :columns="columns" @cancel="cancel1" @confirm="confirm1"></u-picker> -->
		</view>
		<view class="btn">
			<button @click="gotoUpdate" class="btnUpdate">修改</button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			detailInfo: {
				nickName: 'cw061532',
				personDesc: '',
				phone: '181****2263',
				school: '广东科贸职业学院',
				birthday: '',
				gender: '男',
				speciality: '软件技术',
				position: 'java开发',
				address: '广州',
				avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
				education: '大专',
				},
			bgColor: '#00dcb9',
			// titles: [ '头像','昵称','手机号','学校','生日','性别','专业','学历','毕业年份','意向职位','意向地点','个人介绍'],
			titles: [
				{
					title: '昵称',
					value: 'cw061532'
				},
				{
					title: '手机号',
					value: '181****2263'
				},
				{
					title: '学校',
					value: '广东科贸职业学院'
				},
				{
					title: '生日',
					value: '生日'
				},
				{
					title: '性别',
					value: '性别'
				}
			]
		};
	},
	onShow() {
		if (this.userInfo && JSON.stringify(this.userInfo) !== '{}') {
			// this.detailInfo = this.userInfo;
			this.detailInfo =JSON.parse(JSON.stringify(this.userInfo))
			console.log(this.detailInfo);
		} else {
			uni.$showMsg('获取个人信息失败', 2000);
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/my/user/myUser'
				});
			}, 2000);
		}
	},
	methods: {
		// 修改按钮
		gotoUpdate() {
			uni.navigateTo({
				url: '/subpkg/submy/person/changePerson'
			});
		},
		// 预览图片
		lookImg() {
			// 预览图片
			uni.previewImage({
				// (这里放图片的数组，也就是放所有图片的集合)
				urls: [this.detailInfo.avatar, 'https://cdn.uviewui.com/uview/album/1.jpg'],
				// 可以放当前点击的图片路径也可以放当前图片的索引
				current: this.detailInfo.avatar,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function (data) {},
					fail: function (err) {}
				}
			});
		}
	},
	computed: {
		// 从vuex中获取用户信息
		...mapState(['userInfo'])
	}
};
</script>

<style lang="scss" scoped>
.u-page__item {
	margin-top: 78px;
	padding-bottom: 120rpx;
}
::v-deep .u-cell__title-text,
::v-deep .u-cell__value {
	font-size: 36rpx !important;
}

.myIntroduce {
	font-size: 34rpx;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;

	.Intitle {
		font-size: 36rpx;
		margin-bottom: 24rpx;
	}

	.content {
		// text-align: center;
		padding: 10rpx 0;
		margin: 0 6rpx;
		white-space: normal;
		word-wrap:break-word;
		word-break:break-all;
	}
	/deep/ img {
		width: 400rpx;
		height: 400rpx;
	}
}
.btn {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	.btnUpdate {
		height: 120rpx;
		line-height: 120rpx;
		font-size: 38rpx;
		background-color: #00dcb9;
		color: white;
		font-weight: 700;
	}
}
</style>
